<template>

  <div id="rightList">

    <el-row class="handleBtn">
      <el-button type="primary" icon="el-icon-circle-plus-outline" round @click.native="openAddRight" size="mini">新增权限</el-button>
    </el-row>

    <div style="text-align:left;">
      <!-- 父权限列表 -->
      <el-table
        :data="rightDataList"
        style="width: 100%"
      >

        <!-- 列表的首列拓展 -->
        <el-table-column type="expand">

          <!-- 子权限列表模板 -->
          <template slot-scope="props">
            <!-- 子权限列表 start -->
            <el-table
              :data="props.row.childrenList"
              style="width: 100%" :show-header="false" border>
              <el-table-column
                label="权限名称"
                prop="systemRightName"
                align="center">
              </el-table-column>
              <el-table-column
                label="权限标识"
                prop="systemRightPermission"
                align="center">
              </el-table-column>
              <el-table-column
                label="权限类型"
                prop="systemRightType"
                :formatter="formatSystemRightType"
                align="center">
              </el-table-column>
              <el-table-column
                label="权限状态"
                prop="isEnabled"
                :formatter="formatSystemRightIsEnabled"
                align="center">
              </el-table-column>
              <!--<el-table-column-->
              <!--label="权限备注"-->
              <!--prop="rightRemark"-->
              <!--align="right"-->
              <!--&gt;-->
              <!--</el-table-column>-->
              <el-table-column
                fixed="right"
                label="操作"
                align="center">
                <template slot-scope="scope">
                  <el-button type="success" icon="el-icon-edit" round @click.native="openUpdateRight(scope.row)" size="mini">修改
                  </el-button>
                  <el-button type="danger" icon="el-icon-delete" round @click.native="deleteRight(scope.row)" size="mini">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 子权限列表 end -->
          </template>

        </el-table-column>

        <el-table-column
          label="权限名称"
          prop="systemRightName"
          align="center">
        </el-table-column>
        <el-table-column
          label="权限标识"
          prop="systemRightPermission"
          align="center">
        </el-table-column>
        <el-table-column
          label="权限类型"
          prop="systemRightType"
          :formatter="formatSystemRightType"
          align="center">
        </el-table-column>
        <el-table-column
          label="权限状态"
          prop="isEnabled"
          :formatter="formatSystemRightIsEnabled"
          align="center">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-edit" round @click.native="openUpdateRight(scope.row)" size="mini">
              修改
            </el-button>
            <el-button type="danger" icon="el-icon-delete" round @click.native="deleteRight(scope.row)" size="mini">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增权限表单窗口 -->

    <!-- 新增-权限弹窗 -->
    <el-dialog title="权限信息" :visible.sync="addRightDialog">
      <el-form :model="addRightForm" ref="addRightForm" label-position="left">
        <el-form-item label="权限名称" :label-width="formLabelWidth" prop="systemRightName"
                      :rules="{required: true, message: '权限名称不能为空', trigger: 'blur'}">
          <el-input v-model="addRightForm.systemRightName" autocomplete="off" placeholder="权限名称"></el-input>
        </el-form-item>
        <el-form-item label="上级权限" :label-width="formLabelWidth" prop="systemRightParentId"
                      :rules="{required: true, message: '上级权限不能为空', trigger: 'blur'}">
          <el-select v-model="addRightForm.systemRightParentId" placeholder="请选择上级权限">
            <el-option
              v-for="item in parentRightList"
              :key="item.systemRightId"
              :label="item.systemRightName"
              :value="item.systemRightId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限标识" :label-width="formLabelWidth">
          <el-input v-model="addRightForm.systemRightPermission" autocomplete="off"
                    placeholder="权限标识"></el-input>
        </el-form-item>
        <el-form-item label="权限类型" :label-width="formLabelWidth" prop="systemRightType"
                      :rules="{required: true, message: '权限类型不能为空', trigger: 'blur'}">
          <el-select v-model="addRightForm.systemRightType" placeholder="请选择权限类型">
            <el-option
              v-for="item in rightTypeList"
              :key="item.value"
              :label="item.msg"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否可用" :label-width="formLabelWidth" prop="isEnabled"
                      :rules="{required: true, message: '权限状态不能为空', trigger: 'blur'}">
          <el-radio-group v-model="addRightForm.isEnabled">
            <el-radio :label="'1'">可用</el-radio>
            <el-radio :label="'2'">禁止</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限序号" :label-width="formLabelWidth">
          <el-input v-model="addRightForm.systemRightSort" autocomplete="off" placeholder="权限序号"></el-input>
        </el-form-item>
        <el-form-item label="权限备注" :label-width="formLabelWidth">
          <el-input v-model="addRightForm.systemRightRemark" autocomplete="off" placeholder="权限备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addRightDialog = false">取 消</el-button>
        <el-button type="primary" @click="addRight('addRightForm')">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 修改-权限弹窗 -->
    <el-dialog title="权限信息" :visible.sync="updateRightDialog">
      <el-form :model="updateRightForm" ref="updateRightForm" label-position="left">
        <el-form-item label="权限名称" :label-width="formLabelWidth" prop="systemRightName"
                      :rules="{required: true, message: '权限名称不能为空', trigger: 'blur'}">
          <el-input v-model="updateRightForm.systemRightName" autocomplete="off" placeholder="权限名称"></el-input>
        </el-form-item>
        <el-form-item label="上级权限" :label-width="formLabelWidth">
          <el-select v-model="updateRightForm.systemRightParentId" placeholder="请选择上级权限" disabled>
            <el-option
              v-for="item in parentRightList"
              :key="item.systemRightId"
              :label="item.systemRightName"
              :value="item.systemRightId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限标识" :label-width="formLabelWidth">
          <el-input v-model="updateRightForm.systemRightPermission" autocomplete="off"
                    placeholder="权限标识"></el-input>
        </el-form-item>
        <el-form-item label="权限类型" :label-width="formLabelWidth" prop="systemRightType"
                      :rules="{required: true, message: '权限类型不能为空', trigger: 'blur'}">
          <el-select v-model="updateRightForm.systemRightType" placeholder="请选择权限类型">
            <el-option
              v-for="item in rightTypeList"
              :key="item.value"
              :label="item.msg"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否可用" :label-width="formLabelWidth" prop="isEnabled"
                      :rules="{required: true, message: '权限状态不能为空', trigger: 'blur'}">
          <el-radio-group v-model="updateRightForm.isEnabled">
            <el-radio :label="'1'">可用</el-radio>
            <el-radio :label="'2'">禁止</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限序号" :label-width="formLabelWidth">
          <el-input v-model="updateRightForm.systemRightSort" autocomplete="off" placeholder="权限序号"></el-input>
        </el-form-item>
        <el-form-item label="权限备注" :label-width="formLabelWidth">
          <el-input v-model="updateRightForm.systemRightRemark" autocomplete="off" placeholder="权限备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateRightDialog = false">取 消</el-button>
        <el-button type="primary" @click="updateRight('updateRightForm')">确 定</el-button>
      </div>
    </el-dialog>

  </div>


</template>

<script>

  import common from "@/assets/js/common/common.js";

  export default{
    data(){
      return {
        rightDataList: [], //权限数据列表
        parentRightList: [], //所有父级权限列表
        addRightDialog: false, //控制新增权限窗口
        formLabelWidth: '120px', //全部form宽度
        //权限类型列表
        rightTypeList: [
          {
            value: "1",
            msg: "菜单"
          },
          {
            value: "2",
            msg: "按钮"
          }
        ],
        //新增权限表单
        addRightForm: {
          systemRightName: "",
          systemRightParentId: null,
          systemRightUrl: "",
          systemRightPermission: "",
          systemRightType: null,
          isEnabled: null,
          systemRightSort: null,
          systemRightRemark: ""
        },
        updateRightDialog: false,//控制修改权限窗口
        //修改权限表单
        updateRightForm: {
          systemRightId: null,
          systemRightName: "",
          systemRightParentId: null,
          systemRightUrl: "",
          systemRightPermission: "",
          systemRightType: null,
          isEnabled: null,
          systemRightSort: null,
          systemRightRemark: ""
        }
      }
    },
    mounted: function () {
      //需要执行的方法可以在mounted中进行触发，其获取的数据可以赋到data中后，可以放在前面进行渲染
      this.getRightList({});//获取权限分页列表
      this.getParentRightList();//获取所有父级权限列表
    },
    methods: {
      /**
       * 获取权限分页列表
       * */
      getRightList(param){
        this.rightDataList = [{
          "systemRightId": "730944568144429056",
          "systemRightName": "安全管理",
          "systemRightParentId": "",
          "systemRightUrl": "#",
          "systemRightPermission": "#",
          "systemRightType": "1",
          "isEnabled": "1",
          "systemRightSort": "1",
          "createDate": "2018-09-04 17:28:27",
          "systemRightRemark": "",
          "childrenList": [
            {
              "systemRightId": "730944690936872960",
              "systemRightName": "用户列表",
              "systemRightParentId": "730944568144429056",
              "systemRightUrl": "admin/safe/staff/toList",
              "systemRightPermission": "staffList",
              "systemRightType": "1",
              "isEnabled": "1",
              "systemRightSort": "1",
              "createDate": "2018-09-04 17:28:56",
              "systemRightRemark": "",
              "childrenList": ""
            }, {
              "systemRightId": "730944690936872961",
              "systemRightName": "权限管理",
              "systemRightParentId": "730944568144429056",
              "systemRightUrl": "admin/safe/right/toList",
              "systemRightPermission": "rightList",
              "systemRightType": "1",
              "isEnabled": "1",
              "systemRightSort": "1",
              "createDate": "2018-09-04 17:28:56",
              "systemRightRemark": "",
              "childrenList": ""
            }, {
              "systemRightId": "730944690936872961",
              "systemRightName": "角色管理",
              "systemRightParentId": "730944568144429056",
              "systemRightUrl": "admin/safe/role/toList",
              "systemRightPermission": "roleList",
              "systemRightType": "1",
              "isEnabled": "1",
              "systemRightSort": "1",
              "createDate": "2018-09-04 17:28:56",
              "systemRightRemark": "",
              "childrenList": ""
            }
          ]
        }, {
          "systemRightId": "730944568144429056",
          "systemRightName": "日志管理",
          "systemRightParentId": "",
          "systemRightUrl": "#",
          "systemRightPermission": "#",
          "systemRightType": "1",
          "isEnabled": "1",
          "systemRightSort": "1",
          "createDate": "2018-09-04 17:28:27",
          "systemRightRemark": "",
          "childrenList": [
            {
              "systemRightId": "730944690936872960",
              "systemRightName": "登陆日志",
              "systemRightParentId": "730944568144429056",
              "systemRightUrl": "admin/safe/staff/toList",
              "systemRightPermission": "logLogin",
              "systemRightType": "1",
              "isEnabled": "1",
              "systemRightSort": "1",
              "createDate": "2018-09-04 17:28:56",
              "systemRightRemark": "",
              "childrenList": ""
            }, {
              "systemRightId": "730944690936872961",
              "systemRightName": "系统日志",
              "systemRightParentId": "730944568144429056",
              "systemRightUrl": "admin/safe/right/toList",
              "systemRightPermission": "logSystem",
              "systemRightType": "1",
              "isEnabled": "1",
              "systemRightSort": "1",
              "createDate": "2018-09-04 17:28:56",
              "systemRightRemark": "",
              "childrenList": ""
            }, {
              "systemRightId": "730944690936872961",
              "systemRightName": "日志监控",
              "systemRightParentId": "730944568144429056",
              "systemRightUrl": "admin/safe/role/toList",
              "systemRightPermission": "logNewest",
              "systemRightType": "1",
              "isEnabled": "1",
              "systemRightSort": "1",
              "createDate": "2018-09-04 17:28:56",
              "systemRightRemark": "",
              "childrenList": ""
            }
          ]
        }];
      },
      /**
       * 根据列表的数据转换权限类型
       * */
      formatSystemRightType(row){
        var msg = "";
        switch (row.systemRightType) {
          case "1":
            msg = "菜单";
            break;
          case "2":
            msg = "按钮";
            break;
          default:
            break;
        }
        return msg;
      },
      /**
       * 根据列表的数据转换权限状态
       * */
      formatSystemRightIsEnabled(row){
        var msg = "";
        switch (row.isEnabled) {
          case "1":
            msg = "可用";
            break;
          case "2":
            msg = "禁止";
            break;
          default:
            break;
        }
        return msg;
      },
      /**
       * 重置权限列表
       * */
      resetRightList(){
        this.getRightList({});
      },
      /**
       * 打开新增权限窗口
       * */
      openAddRight(){
        this.addRightForm = {};
        this.addRightDialog = true;
      },
      /**
       * 获取所有父级权限列表
       * */
      getParentRightList(){
        this.parentRightList = [{
          "systemRightId": "0",
          "systemRightName": "无",
          "systemRightParentId": "",
          "systemRightUrl": "#",
          "systemRightPermission": "#",
          "systemRightType": "1",
          "isEnabled": "1",
          "systemRightSort": "1",
          "createDate": "2018-09-04 17:28:27",
          "systemRightRemark": "",
          "childrenList": ""
        }, {
          "systemRightId": "730944568144429056",
          "systemRightName": "安全管理",
          "systemRightParentId": "",
          "systemRightUrl": "#",
          "systemRightPermission": "#",
          "systemRightType": "1",
          "isEnabled": "1",
          "systemRightSort": "1",
          "createDate": "2018-09-04 17:28:27",
          "systemRightRemark": "",
          "childrenList": ""
        }, {
          "systemRightId": "730944568144429056",
          "systemRightName": "日志管理",
          "systemRightParentId": "",
          "systemRightUrl": "#",
          "systemRightPermission": "#",
          "systemRightType": "1",
          "isEnabled": "1",
          "systemRightSort": "1",
          "createDate": "2018-09-04 17:28:27",
          "systemRightRemark": "",
          "childrenList": ""
        }];
      },
      /**
       * 新增权限
       * */
      addRight(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            common.message("操作成功", "success"); //提示框信息
            this.addRightDialog = false; //关闭弹窗
            if (true) {
              this.resetRightList();//重置当前权限列表
              this.getParentRightList();//重置父级权限列表
            }
          } else {
            return false;
          }
        });
      },
      /**
       * 打开编辑权限窗口
       * */
      openUpdateRight(row){
        this.updateRightForm = row;
        if (this.updateRightForm.systemRightParentId == null || this.updateRightForm.systemRightParentId == "") {
          this.updateRightForm.systemRightParentId = "0";
        }
        this.updateRightDialog = true; //打开弹窗
      },
      /**
       * 修改权限
       * */
      updateRight(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            common.message("操作成功", "success"); //提示框信息
            this.updateRightDialog = false; //关闭弹窗
            if (true) {
              this.resetRightList();//重置当前权限列表
              this.getParentRightList();//重置父级权限列表
            }
          } else {
            return false;
          }
        });
      },
      /**
       * 删除权限
       * */
      deleteRight(row){
        this.$confirm("确认是否删除权限【" + row.systemRightName + "】", "是否继续?", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          common.message("操作成功", "success"); //提示框信息
          if (true) {
            this.resetRightList();//重置当前权限列表
            this.getParentRightList();//重置父级权限列表
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      }
    }
  }
</script>


<style lang="scss">
  #rightList{
    margin:30px;
    .el-button.is-round{
      border-radius: 6px;
    }
    .el-table__expanded-cell[class*=cell]{
      padding:20px 0 20px 48px;
    }
    .handleBtn{
      background-color: white;
      padding:15px 20px;
      text-align: left;

    }
  }


</style>

